<template>
  <PageWrapper class="high-form" title="委托依据">

    <CollapseContainer title="基础信息">
      <BasicForm @register="registerForm" ref="formRef">
        <template #detailList="{ model }">
          <DetailTable :reasonId="id" />
        </template>
      </BasicForm>
    </CollapseContainer>

    <CollapseContainer title="流程信息">
      <SelectApprover :id="id" :type="type" @success="getFlowData" />
    </CollapseContainer>
    <a-button type="primary" @click="handleSubmitForm" v-if="serverData.showCommit"> 提交 </a-button> <span> </span>
    <a-button type="primary" @click="handleSaveForm(0)" v-if="serverData.showCommit"> 存草稿 </a-button> <span> </span>
    <a-button color="error"  @click="handleDeleteForm" v-if="serverData.showCommit && id>0"> 删除 </a-button>

  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, onMounted, } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { Button, Tag, List, } from 'ant-design-vue';
import { BasicForm, useForm, ApiSelect } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page';

import { formSchema } from './data';
import { add, update, del } from '/@/api/project/reason';
import DetailTable from './DetailTable.vue';
import SelectApprover from '/@/views/process/SelectApprover.vue';
import { businessdata } from '/@/api/work/work';



export default defineComponent({
  components: {
    BasicForm, CollapseContainer, PageWrapper, Button, Tag, ApiSelect, SelectApprover, DetailTable,
    List, ListItem: List.Item, ListItemMeta: List.Item.Meta,
  },
  emits: ['success', 'register'],
  setup() {
    //主表单begin
    const [registerForm, { setFieldsValue, validate }] = useForm({
      schemas: formSchema,
      labelWidth: 100,
      showActionButtonGroup: false,
    });

    //流程参数 begin
    const serverDataType: any = { showApprove: false, aaList: [], ccList: [] }
    const serverData = ref(serverDataType);
    const id = ref(0);
    const type = ref('CheckReason');
    function getFlowData(returnData: any) {
      //console.log('SelectApprover回传数据：', returnData)
      serverData.value = returnData
    }
    //流程参数 end

    onBeforeMount(() => {
      // 获取路由参数
      const r = useRoute();
      let idStr = r.params.id
      if (typeof (idStr) == 'string') {
        id.value = parseInt(idStr, 10)
      } else {
        id.value = parseInt(idStr[0], 10)
      }
    })

    onMounted(() => {
      if (id.value > 0) {
        setFieldsValue(serverData)
        businessdata({ id: id.value, type: type.value }).then(res => {
          setFieldsValue(res)
          console.log('获取【委托依据】数据成功', res)
        })
      }
    })



    const { createMessage } = useMessage();
    //提交，需要选择审批人
    const router = useRouter();
    async function handleSubmitForm() {
      if (serverData.value.aaList == null || serverData.value.aaList.length == 0) {
        createMessage.success({
          content: '请选择审批人',
          duration: 1,
        });
        return
      }
      handleSaveForm(1)
      router.push('/work/work-done');//跳转已处理
    }
    //存草稿
    async function handleSaveForm(type) {
      let content = '存草稿成功'
      const values = await validate();
      if (type === 1) {
        content = '提交成功'
        values['aaList'] = serverData.value.aaList
        values['ccList'] = serverData.value.ccList
      }

      if (id.value > 0) {
        await update(values);
      } else {
        await add(values).then(res => {
          //跳转查看页
          router.push('/project/reason/view/' + res.id);
        });
      }
      createMessage.success({
        content: content,
        duration: 1,
      });
    }
     //删除
    function handleDeleteForm(){
        if(confirm("确认要删除吗")){
            del(id.value).then(res=>{
               router.push('/work/work-done');
            });
        }
    }
    //主表单end



    return {
      registerForm, handleSaveForm, handleSubmitForm, handleDeleteForm, 
      getFlowData, serverData, id, type
    };
  },
});
</script>
